<template>
	<view class="slide">
		<view class="text" :class="iscurrent == index ? 'isslide':''" v-for="(item,index) in items" :key="index"
			@click="iscurrent = index">
			<text>{{item}}</text>
			<view class="istext"></view>
		</view>
	</view>
	<swiper class="isswiper" :current="iscurrent" @change="slide_swiper">
		<swiper-item>
			<view class="swiper_item">
				<text>当前暂无可用优惠券</text>
				<image class="isimage" src="../../static/优惠券.png" mode="aspectFit"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper_item">
				<text>当前暂无已使用优惠券</text>
				<image class="isimage" src="../../static/优惠券.png" mode="aspectFit"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper_item">
				<text>当前暂无已失效优惠券</text>
				<image class="isimage" src="../../static/优惠券.png" mode="aspectFit"></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const items = ref(['待使用', '已使用', '已失效']);
	const iscurrent = ref(0);

	function slide_swiper(event) {
		iscurrent.value = event.detail.current;
	}
</script>

<style lang="scss" scoped>
	.slide {
		width: 100vw;
		height: 5vh;
		display: flex;
		justify-content: space-around;

		.text {
			color: rgb(0, 0, 0);
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.istext {
				height: 3px;
				width: 20px;
				margin-top: 5px;
			}
		}

		.isslide {
			color: #187cff;
			font-weight: bold;

			.istext {
				height: 3px;
				width: 20px;
				background-color: #187cff;
			}
		}
	}
	.isswiper{
		background-color: #F5F5F5;
		width: 100vw;
		height: 95vh;
		.swiper_item{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.isimage{
				width: 40vw;
				height: 40vw;
				opacity: 0.8;
			}
		}
		
	}
</style>